<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"></meta>
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title></title>
    <link rel="stylesheet" href="http://1.xinli2017.applinzi.com/login/css/mui.min.css"/>
    <script src="http://1.xinli2017.applinzi.com/weixin/js/jquery.min.js"></script>
    <script src="http://1.xinli2017.applinzi.com/weixin/js/mui.min.js"></script>
    <script type="text/javascript">
        document.addEventListener('plusready', function () {
            //console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。"
        });
    </script>
    <style>
        body {
            font-size: 16px;
        }

        label {
            width: 10%;
        !important
        }

        input {
            height: 35px;
        }

        input[type=text] {
            border: 0;

        }

        input[placeholder] {
            font-size: 14px;
        }

        input[type=password] {
            border: 0;
        }

        input[type=button] {
            border: 0;
        }

        #mis h3 {
            text-align: center;
            padding: 10px 5px;
            font-size: 20px;
        }

        .city {
            height: auto;
            margin-bottom: 10px;
            background: #fff;
        }

        .city input[type=text] {
            margin: 0;

        }

        .city input:nth-child(2) {
            border-bottom: 1px solid #ebebeb;

        }

        .text {
            width: 100%;
            color: #FF9A4A;
            font-size: 14px;
            margin-top: 15px;
        }

        .dingdan {
            text-align: center;
            height: 50px;
            line-height: 50px;
        }

        .dingdan span {
            font-size: 14px;
        }

        .dingdan span > span {
            font-size: 18px;
            color: #FF9A4A;
            font-weight: bold;
        }

        .select {
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
        }

        .select select {
            width: 49%;
            color: #333;
            font-size: 14px;
        }

        .mui-table-view:after {
            background-color: #fff;
        }

        .mui-table-view:before {
            background-color: #fff;
        }
    </style>
</head>
<body style="padding: 0 15px">
<script>
		try{
			window.android.invokeMethod(0,["确认充值信息","true"])
				}catch(e){
			console.log(e)
		}
	</script>
<header class="mui-bar mui-bar-nav" style="background:#37c3e7">
    <h1 class="mui-title" style="color:#fff;">确认充值信息</h1>
</header>
<div style="margin:60px 0px 10px 0px;border-radius:5px;background: none;">
    <div class="dingdan">
        <span>订单金额：<span id="amt" th:text="${amount}"></span>元</span>
        <span style="display:none" id="ordercode" th:text="${ordercode}"></span>
    </div>
    <div class="mui-input-row">
        <input id="topname" type="text" th:value="${bankName}" disabled="disabled" placeholder="收款卡银行名称"/>
       <!--  <input id="pro" style="display:none" type="text" th:value="${province_b}" />
        <input id="cit" style="display:none" type="text" th:value="${city_b}" /> -->
        <input id="bname" style="display:none" type="text"  th:value="${bankBranchName}" />
    </div>
</div>
<div>
    <ul class="mui-table-view">
        <li class="mui-table-view-cell mui-media">
            <a href="javascript:;">
                <img class="mui-media-object mui-pull-left"
                     src="http://1.xinli2017.applinzi.com/weixin/images/src_assets_mangopay_cashier_method_unionpay.png"/>
                <div class="mui-media-body">
                    收款卡卡号
                    <p class='mui-ellipsis' id="ka" th:text="${bankNo}"></p>
                    <input id="ka2" type="hidden" th:value="${bankNo}" placeholder=""/>
                </div>
            </a>
        </li>
    </ul>
</div>
<div class="select">
    <select name="" id="provinceOfBank"  >
        <option id="province2" name="provinceOfBank" th:value="${provinceOfBank}" >请选择所在省份</option>
    </select>
    <select name="" id="cityOfBank">
        <option id="city2" name="cityOfBank" th:value="${cityOfBank}">请选择所在市/区</option>
    </select>
</div>
<select name="" id="branch">
    <option id="branch2" name="bankBranchName" th:value="${bankBranchName}" >请选择收款卡银行支行</option>
</select>
<input type="text" placeholder="请输入收款卡银行支行名称"  style="display:none" id="handdown"/>
<div class="city">
    <div>
        <span></span>
        <input style="display:none" type="text" placeholder="支行联行号" th:value="${bankBranchId}" id="branchno"/>
    </div>
</div>
    <div>
        <span></span>
        <input style="display:none" type="text"  th:value="${expiredTime}" id="exp"/>
         <input style="display:none" type="text"  th:value="${isRegister}" id="isregister"/>
        
    </div>
    <div>
        <span></span>
        <input style="display:none" type="text"  th:value="${securityCode}" id="sec"/>
    </div>
<div class="mui-input-row" style="width:100%;margin:15px auto;">
    <button id="btn" class="mui-btn mui-btn-primary"
            style="width:100%;height:40px;padding:15px 0;background:#37c3e7;border:0;">确定并充值
    </button>
</div>
<input style="display:none" type="text"  th:value="${companyType}" id="companyType"/>
<input style="display:none" type="text"  th:value="${shortName}" id="shortName"/>
<input style="display:none" type="text"  th:value="${businessLicenseno}" id="businessLicenseno"/>
<input style="display:none" type="text"  th:value="${registeredCapital}" id="registeredCapital"/>
<input style="display:none" type="text"  th:value="${provinceOfShop}" id="provinceOfShop"/>
<input style="display:none" type="text"  th:value="${cityOfShop}" id="cityOfShop"/>
<input style="display:none" type="text"  th:value="${creationDate}" id="creationDate"/>
<p class="text">提醒：您正在进行一笔消费交易，请认真核实并确保银行卡信息不能透露给别人！</p>

<script  type="text/javascript">
    $(function () {
    	var bname = $("#bname").val();
		
	
   	 var province2=$("#province2").val()
     var city2=$("#city2").val()
     var branch2=$("#branch2").val()
	 if(province2 != "" && city2 =="" && branch2==""){
		$("#province2").text()
	}
     if(province2 != "" && city2 !="" && branch2!=""){
        $("#province2").text(province2)
        $("#city2").text(city2)
        $("#branch2").text(branch2)
    }
    if(province2 != "" && city2 !="" && branch2==""){
        $("#province2").text(province2)
        $("#city2").text(city2)
        $("#branch2").text()
    }
      if(province2 == "" && city2 =="" && branch2==""){
        $("#province2").text()
        $("#city2").text()
        $("#branch2").text()
    }
		 
		 
        var str = $('#ka').text()
        function fun(str) {
            var arr = str.split('');
            arr.splice(4, 10, "*", "*", "*", "*", "*", "*", "*", "*", "*", "*");
            str = arr.join('');
            $('#ka').text(str)
        }
        fun(str);
        
        $.ajax({
            url: 'http://47.104.158.3/v1.0/user/app/province/queryall',
            type: 'POST',
            dataType: 'JSON',
            success: function (data) {
                $.each(eval(data.result), function (i, item) {
                	$("#provinceOfBank").append('<option value="'+item.provinceid+'">'+item.province+'</option>');
                });
            },
            error: function () {
                console.log('加载数据异常，请重试!');
            }
        });
        
        function loadDevice(provinceid) {
            $.ajax({
                url: 'http://47.104.158.3/v1.0/user/app/city/queryall',
                type: 'POST',
                dataType: 'JSON',
                data: {
                    provinceid: provinceid
                },
                success: function (msg) {
                    console.log(msg)
                    if (msg == "{[]}") {
                        $("#cityOfBank").empty();
                    } else {
                        $("#cityOfBank").empty();
                        $("#cityOfBank").append('<option value="">请选择所在市/区</option>');
                        $.each(eval(msg.result), function (i, item) {
                            if (item.area == undefined) {
                                item.area = item.city;
                            }
                            if (item.areaid == undefined) {
                                item.areaid = item.cityid;
                            }
                            $("#cityOfBank").append('<option value="'+item.areaid+'">'+item.area+'</option>');
                        });
                    }
                },
                error: function () {
                    console.log('加载数据异常，请重试!');
                }
            });
        }
        
        $("#provinceOfBank").change(function () {
            loadDevice($("#provinceOfBank").val());
        });
        
        
     	var provinces=$("#province2").val();
   	 	var citys=$("#city2").val();
        var branch2=$("#branch2").val()
        if(provinces !="" &&citys !="" && branch2 !=""){
            $("#province2").text(province2)
            $("#citys").text(citys)
            $("#branch2").text(branch2)
        }
		if(provinces == "" && citys == ""){
			$('#cityOfBank').change(function () {
	            var province = $('#provinceOfBank option:selected').text();
	            var city = $('#cityOfBank option:selected').text();
	            var topname = $('#topname').val();
	            console.log(province)
	            console.log(city)
	            console.log(topname)
	            $.ajax({
	                url: 'http://47.104.158.3/v1.0/paymentchannel/branchbank/query',
	                datatype: 'json',
	                type: 'POST',
	                data: {
	                    province: province,
	                    city: city,
	                    bankBranchname: topname
	                },
	                success: function (msg) {
	                    console.log(msg)
	                    if (msg.resp_code == "999999") {
	                    	alert("暂不支持该银行卡");
	                    	$('#provinceOfBank option:selected').text("请选择所在省份");
	                    	$('#cityOfBank option:selected').text("请选择所在市/区");
	                    } else {
	                        $("#branch").empty();
	                        $("#branch").append('<option value="">请选择收款卡银行支行</option>');
	                        $.each(eval(msg.result), function (i, item) {
	                            console.log(item)
	                            $("#branch").append('<option value="'+item.bankBranchno+'">'+item.bankBranchname+'</option>');
	                        });
	                    }
	                },
	                error: function (data) {
	                    console.log('失败')
	                }
	            });
	        });
		}
		if(provinces != ""  && citys == ""  && branch2 ==""){
            $("#province2").text()
            $('#cityOfBank').change(function () {
                var province = $('#provinceOfBank option:selected').text();
                var city = $('#cityOfBank option:selected').text();
                var topname = $('#topname').text();
                console.log(province)
                console.log(city)
                console.log(topname)
                $.ajax({
                    url: 'http://47.104.158.3/v1.0/paymentchannel/branchbank/query',
                    datatype: 'json',
                    type: 'POST',
                    data: {
                        province: province,
                        city: city,
                        bankBranchname: topname
                    },
                    success: function (msg) {
                        console.log(msg)
                        if (msg.resp_code == "999999") {
                            alert("没有支行信息，请重新选择!");
                            $('#provinceOfBank option:selected').text("请选择所在省份");
                            $('#cityOfBank option:selected').text("请选择所在市/区");
                        } else {
                            $("#branch").empty();
                            $("#branch").append('<option id="branch2"  >请选择收款卡银行支行</option>');
                            $.each(eval(msg.result), function (i, item) {
                                console.log(item)
                                $("#branch").append('<option value="'+item.bankBranchno+'">'+item.bankBranchname+'</option>');
                            });
                        }
                    },
                    error: function (data) {
                        console.log('失败')
                    }
                });
            });
     }
		
		if(provinces !="" &&citys !="" && branch2 ==""){
	            var province = $('#provinceOfBank option:selected').text();
	            var city = $('#cityOfBank option:selected').text();
	            var topname = $('#topname').val();
	            console.log(province)
	            console.log(city)
	            console.log(topname)
	            $.ajax({
	                url: 'http://47.104.158.3/v1.0/paymentchannel/branchbank/query',
	                datatype: 'json',
	                type: 'POST',
	                data: {
	                    province: province,
	                    city: city,
	                    bankBranchname: topname
	                },
	                success: function (msg) {
	                    console.log(msg)
	                    if (msg.resp_code == "999999") {
                            alert("暂不支持该银行卡！");
                            $('#provinceOfBank option:selected').text("请选择所在省份");
                            $('#cityOfBank option:selected').text("请选择所在市/区");
                        } else {
	                        $("#branch").empty();
	                        $("#branch").append('<option value="">请选择收款卡银行支行</option>');
	                        $.each(eval(msg.result), function (i, item) {
	                            console.log(item)
	                            $("#branch").append('<option value="'+item.bankBranchno+'">'+item.bankBranchname+'</option>');
	                        });
                        }
	                    
	                },
	                error: function (data) {
	                    console.log('失败')
	                }
	            }); 
		}
        $("#btn").click(function () {
        	var companyType =$("#companyType").val()
        	var shortName =$("#shortName").val()
        	var businessLicenseno =$("#businessLicenseno").val()
        	var registeredCapital =$("#registeredCapital").val()
        	var provinceOfBank =$("#provinceOfBank option:selected").val()
        	var cityOfBank =$("#cityOfBank option:selected").val()
        	var provinceOfShop = $("#provinceOfShop").val();
    		var cityOfShop = $("#cityOfShop").val();
        	var creationDate =$("#creationDate").val()
	        	if($("#handdown").val()==null||$("#handdown").val()==""){
	            	var bankName = $("#branch option:selected").text();
	        	}else{
	        		var bankName = $("#handdown").val();
	        	}
        	
        	if($("#branchno").val()==""){
    			$("#branchno").val("null")
    		}
        	
            var bankNo = "111111111111";
            
            if($("#branchno").val()!="null"){
            	bankNo = $("#branchno").val();
            }else{
            	bankNo = $("#branch option:selected").val();
            }
            
            var topName = $("#topname").val();
            var amount = $("#amt").text();
            var ordercode = $("#ordercode").text();
            var provinceOfBank = $("#provinceOfBank option:selected").text();
            var cityOfBank = $("#cityOfBank option:selected").text();
          
	        if(bankName=="请选择收款卡银行支行"||provinceOfBank=="请选择所在省份"||cityOfBank=="请选择所在市/区"){
	                alert("请完整信息！");
	                return;
	            }
	        $("#btn").attr("disabled", "disabled");
	 		$("#btn").css({background:'#999'})
			$("#btn")[0].innerText="正在加载中..."
	        var banknum = $("#ka2").val();
	        if(bname=="null"||bname==""){
	        	$.ajax({
	        		url: "http://47.104.158.3/v1.0/user/bank/update/cardno",
	        		type: "post",
	        		data: {
		                    bankBranchName: bankName,
		                    bankBranchId: bankNo,
		                    provinceOfBank: provinceOfBank,
		                    cityOfBank: cityOfBank,
		                    bankno: banknum
		                },
		             success:function(data){
		            	 
		             },
		             error: function(data){
		             }
	        	});
	        }
	        var isRegister= $("#isregister").val();
			console.log(isRegister)
			if(isRegister==1){
				 turntopage("http://47.104.158.3/v1.0/paymentchannel/topup/sdjbindcard"+"?ordercode="+ordercode)
			}else{
				var url="http://47.104.158.3/v1.0/paymentchannel/topup/sdjkj/register";
				var type="POST";
				  $.ajax({
		                url: url,
		                type: type,
		                dataType: 'JSON', 
		                data: {
		                    bankBranchName: bankName,
		                    bankBranchId: bankNo,
		                    provinceOfBank: provinceOfBank,
		                    cityOfBank: cityOfBank,
		                    bankName: topName,
		                    amount: amount,
		                    ordercode: ordercode,
		                    companyType:companyType,
		                    shortName:shortName,
		                    businessLicenseno:businessLicenseno,
		                    registeredCapital:registeredCapital,
		                    provinceOfShop:provinceOfShop,
		                    cityOfShop:cityOfShop,
		                    creationDate:creationDate
		                    
		                },
		                success: function (data) {
		                	console.log(data)
			                if(data.resp_code=="success"){
			            		turntopage(data.redirect_url)
			            	}else{
			            		alert("商户注册失败")
			            	} 
		                },
		                error: function (data) {
		                	console.log(data)
		                    alert("充值失败");
		                    $('#btn').removeAttr("disabled");
		                    $("#btn").css({background:'#37c3e7'})
							$("#btn")[0].innerText="确定并充值"
		                }
		            });
			}        
        });
        function turntopage(url){
			mui.openWindow({
			url:url,
			});
		}
   	
        
    });
</script>
</body>
</html>